<template>
    <div>
        <div class="components_searchs" @keyup.enter="queryTable">
                <span class="tit">学校：</span>
                <el-select v-model="table.queryParams.schoolId" clearable filterable placeholder="请选择学校" @change="changeSchool">
                    <el-option
                        v-for="item in schoolList"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>

                <span class="tit">学院：</span>
                <el-select v-model="table.queryParams.secondSchoolId" clearable placeholder="请选择学院" @change="changeSecondSchool">
                    <el-option
                        v-for="item in secondSchoolList"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>

                <span class="tit">专业：</span>
                <el-select v-model="table.queryParams.professionId" clearable placeholder="请选择专业" @change="changeProfession">
                    <el-option v-for="item in professionList" :key="item.id" :label="item.text" :value="item.id"></el-option>
                </el-select>

            <!--
                <el-button type="primary" v-has="'attendanceScore:calc'" icon="el-icon-edit-outline" size="mini" @click="showDialog">计算考勤</el-button>
            -->
            <el-button type="primary" icon="el-icon-search" size="mini" @click="queryTable">查询</el-button>
            <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            <el-button type="primary" icon="el-icon-view" size="mini" @click="showMoreSearch">高级查询</el-button>

        </div>

        <div v-show = "moreSearchDisplay" class="components_searchs">
            <span class="tit">班级：</span>
                <el-select v-model="table.queryParams.classId" clearable placeholder="请选择班级">
                    <el-option
                        v-for="item in classList"
                        :key="item.id"
                        :label="item.text"
                        :value="item.id">
                    </el-option>
                </el-select>

            <span class="tit">课程：</span>
            <el-input v-model="table.queryParams.courseName" auto-complete="off" placeholder="请输入课程"></el-input>
        </div>
        <!--
        <div class="components_btns">
            <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="showAddClassDialog"
                >
            新增
            </el-button>
                <el-button type="primary" size="mini">
                <i class="el-icon-upload el-icon-right"></i>
                    导出
                </el-button>
        </div>
        -->

        <!-- components_btns -->
        <div class="components_btns clearfix">
            <div class="fl">
               <el-button type="primary" icon="el-icon-edit-outline" size="mini" @click="showDialog">计算考勤</el-button>
            </div>
        </div>

        <vue-table
            :api-url="table.apiUrl"
            :fields="table.fields"
            :appendParams="table.queryParams"
            :content="self"
            ref="attendanceScoreTable">
        </vue-table>

        <el-dialog
            title="提示"
            :visible.sync="dialog.state"
            width="30%"
            :close-on-click-modal="false"
            :close-on-press-escape="false">
            学期：
            <el-select v-model="dialog.semester" placeholder="请选择">
                <el-option
                    v-for="item in semesterList" :key="item.value"
                    :label="item.name"
                    :value="item.value">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="calcScore" size="mini">生 成</el-button>
                <el-button @click="dialog.state = false" size="mini">取 消</el-button>
            </span>
        </el-dialog>

        <attendance-score-update ref="attendanceScoreUpdate"></attendance-score-update>
        <attendance-score-detail ref="attendanceScoreDetail"></attendance-score-detail>
    </div>
</template>

<script>
    import {mapGetters} from 'vuex'
    import attendanceScoreUpdate from './attendance-score-update'
    import attendanceScoreDetail from './attendance-score-detail'
    export default {
        components: {
            attendanceScoreUpdate,
            attendanceScoreDetail,
        },
        data() {
            return {
                self: this,
                moreSearchDisplay:false,
                // 计算成绩弹框
                dialog:{
                    state: false,
                    semester: null,   //选中学期
                },
                table: {
                    apiUrl: api.studentAttendanceScore.query,
                    queryParams: {
                        schoolId: null,
                        secondSchoolId: null,
                        professionId: null,
                        classId:null,     // 班级
                        courseName:null,   // 课程
                    },
                    fields: [{
                            prop: "__index",
                            label: "序号",
                        },
                        {
                            prop: "schoolName",
                            label: "学校",
                        },
                        {
                            prop: "secondSchoolName",
                            label: "学院",
                        },
                        {
                            prop: "professionName",
                            label: "专业",
                        },
                        {
                            prop: "className",
                            label: "班级",
                        },
                        {
                            prop: "courseName",
                            label: "课程名称",
                        },
                        {
                            prop: "maxScore",
                            label: "最高分",
                        },
                        {
                            prop: "minScore",
                            label: "最低分",
                        },
                        {
                            prop: "avgScore",
                            label: "平均分",
                        },
                        {
                            prop: "__action",
                            label: "操作",
                            actions: [
                                {
                                    label: "编辑",
                                    type: "edit",
                                    auth: 'attendanceScore:update',
                                    func: function(vm, row) {
                                       vm.$refs.attendanceScoreUpdate.showDialog(row);
                                    }
                                },
                                {
                                    label: "详情",
                                    type: "edit",
                                    auth: 'attendanceScore:detail',
                                    func: function(vm, row) {
                                       vm.$refs.attendanceScoreDetail.showDialog(row.classId,row.courseNo);
                                    }
                                },
                            ]
                        },
                    ],
                },
                // 二级院校列表
                secondSchoolList: null,
                // 专业列表
                professionList: null,
                // 班级集合
                classList: null,
                // 学期集合
                semesterList: null,
            }
        },
        created() {
            this.getSemesterListByDicts();
        },
        mounted() {},
        computed: {
            ...mapGetters({
                schoolList: 'getSchoolList',
            })
        },
        methods: {
            // 高级查询方法
            showMoreSearch(){
                if(this.moreSearchDisplay){
                    this.moreSearchDisplay = false
                }else{
                    this.moreSearchDisplay = true
                }

            },
            // 获取二级院系数据
            getSecondSchoolList(schoolId) {
                let vm = this;
                vm.axios.get(api.getSecondSchoolList, {
                    params: {
                        schoolId: schoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.secondSchoolList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 获取二级院系数据
            getProfessionList(schoolId, secondSchoolId) {
                let vm = this;
                vm.axios.get(api.getProfeesionList, {
                    params: {
                        schoolId: schoolId,
                        secondSchoolId: secondSchoolId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.professionList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询班级列表
            getClassList(professionId){
                let vm = this;
                vm.axios.get(api.getClassList,{
                    params:{
                        professionId: professionId
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.classList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 查询学期列表(来自字典)
            getSemesterListByDicts(){
                let vm = this;
                vm.axios.get(api.dictsTypesSubListUrl, {
                     params: {
                        type: "semester_type",
                    }
                }).then((response) => {
                    if (response.data.success) {
                        this.semesterList = JSON.parse(JSON.stringify(response.data.data));
                    } else {
                        vm.$message.error(response.data.msg);
                    }
                })
            },
            // 计算成绩
            calcScore(){
                let vm = this;
                if(vm.dialog.semester == null){
                     vm.$message({
                        type: 'warn',
                        message: "请选择学期！",
                    });
                    return;
                }
                 vm.$confirm('是否重新计算考勤，已有成绩会被覆盖！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    vm.axios.get(api.studentAttendanceScore.calcScore, {
                        params: {
                            semester: vm.dialog.semester,
                        }
                    }).then((response) => {
                        if (response.data.success) {
                            vm.$message({
                                type: 'success',
                                message: response.data.msg,
                            });
                            // 关闭弹出窗口
                            vm.dialog.state = false;
                            // 刷新table
                            this.$refs.attendanceScoreTable.$emit('vuetable:refresh')
                        } else {
                            vm.$message.error(response.data.msg);
                        }
                    })
                },()=>{})
            },
            changeSchool(schoolId) {
                this.table.queryParams.secondSchoolId = null;
                this.secondSchoolList = [];
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getSecondSchoolList(schoolId);
            },
            changeSecondSchool(secondSchoolId) {
                this.table.queryParams.professionId = null;
                this.professionList = [];
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getProfessionList(this.table.queryParams.schoolId, secondSchoolId);
            },
            changeProfession(professionId) {
                this.table.queryParams.classId = null;
                this.classList = [];
                this.getClassList(professionId);
            },
            queryTable(){
                this.$refs.attendanceScoreTable.$emit('vuetable:refresh')
            },
            resetQuery(){
                for(let key in this.table.queryParams){
                    this.table.queryParams[key] = null;
                }
                this.secondSchoolList = [];
                this.professionList = [];
                this.$refs.attendanceScoreTable.$emit('vuetable:refresh')
            },
            // 显示计算考勤dialog
            showDialog(){
                this.dialog.state = true;
                this.dialog.semester = null;
            }
        },
    };
</script>
<style scoped>

</style>